<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');
        const width = canvas.width;
        const height = canvas.height;

        // Clear canvas with a white background
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, width, height);

        // --- Define drawing parameters ---
        const cx = width / 2; // Center X
        const cy = height / 2; // Center Y
        const A_pixels = 250;  // Distance from O to Q in pixels
        const pointRadius = 4.5;
        const phi = Math.PI / 7; // Angle for visualization, approx 25.7 degrees

        // --- Set drawing styles ---
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 1.5;
        ctx.font = 'italic 24px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        const pointFillColor = '#333333'; // Dark gray for points

        // 1. Draw horizontal line MN
        ctx.beginPath();
        ctx.moveTo(50, cy);
        ctx.lineTo(width - 50, cy);
        ctx.stroke();

        // 2. Draw labels M and N
        ctx.fillStyle = 'black';
        ctx.fillText('M', 65, cy - 15);
        ctx.fillText('N', width - 65, cy - 15);

        // 3. Draw point O and its label
        // Point O
        ctx.beginPath();
        ctx.arc(cx, cy, pointRadius, 0, 2 * Math.PI);
        ctx.fillStyle = pointFillColor;
        ctx.fill();
        // Label O
        ctx.fillStyle = 'black';
        ctx.fillText('O', cx, cy + 28);

        // 4. Draw fixed charges Q and their labels
        // Left charge Q
        const qLeftX = cx - A_pixels;
        ctx.beginPath();
        ctx.arc(qLeftX, cy, pointRadius, 0, 2 * Math.PI);
        ctx.fillStyle = pointFillColor;
        ctx.fill();
        ctx.fillStyle = 'black';
        ctx.fillText('Q', qLeftX, cy - 28);

        // Right charge Q
        const qRightX = cx + A_pixels;
        ctx.beginPath();
        ctx.arc(qRightX, cy, pointRadius, 0, 2 * Math.PI);
        ctx.fillStyle = pointFillColor;
        ctx.fill();
        ctx.fillStyle = 'black';
        ctx.fillText('Q', qRightX, cy - 28);

        // 5. Draw distance labels A
        // Left A (above the line)
        ctx.fillText('A', cx - A_pixels / 2, cy - 28);
        // Right A (below the line)
        ctx.fillText('A', cx + A_pixels / 2, cy + 28);

        // 6. Draw the thin tube
        const tubeLength = 700;
        const tubeOffset = 3; // Half the distance between the parallel lines of the tube
        const cosPhi = Math.cos(phi);
        const sinPhi = Math.sin(phi);

        // The canvas y-coordinate is inverted, so sin(phi) is subtracted for upward movement.
        // Line 1
        ctx.beginPath();
        let startX1 = cx - (tubeLength / 2) * cosPhi + tubeOffset * sinPhi;
        let startY1 = cy - (tubeLength / 2) * sinPhi - tubeOffset * cosPhi;
        let endX1 = cx + (tubeLength / 2) * cosPhi + tubeOffset * sinPhi;
        let endY1 = cy + (tubeLength / 2) * sinPhi - tubeOffset * cosPhi;
        ctx.moveTo(startX1, startY1);
        ctx.lineTo(endX1, endY1);
        ctx.stroke();

        // Line 2
        ctx.beginPath();
        let startX2 = cx - (tubeLength / 2) * cosPhi - tubeOffset * sinPhi;
        let startY2 = cy - (tubeLength / 2) * sinPhi + tubeOffset * cosPhi;
        let endX2 = cx + (tubeLength / 2) * cosPhi - tubeOffset * sinPhi;
        let endY2 = cy + (tubeLength / 2) * sinPhi + tubeOffset * cosPhi;
        ctx.moveTo(startX2, startY2);
        ctx.lineTo(endX2, endY2);
        ctx.stroke();

        // 7. Draw angle phi and its label
        const arcRadius = 70;
        ctx.beginPath();
        // The angle is drawn between the positive x-axis and the tube.
        // In canvas, angles are measured clockwise from the positive x-axis.
        // So for an upward-right angle, we use a negative angle value.
        ctx.arc(cx, cy, arcRadius, 0, -phi, true); 
        ctx.stroke();
        
        // Label phi
        const labelRadius = arcRadius * 0.6;
        const labelAngle = -phi / 2;
        ctx.fillText('φ', cx + labelRadius * Math.cos(labelAngle), cy + labelRadius * Math.sin(labelAngle) - 5);

        // 8. Draw labels m, q
        const mq_dist = 140;
        const mq_x = cx - mq_dist * cosPhi;
        const mq_y = cy - mq_dist * sinPhi - 30; // Displace it upward from the tube center
        ctx.fillText('m, q', mq_x, mq_y);

    </script>
</body>
</html>